<template>
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in img" :key="item.id">
      <img :src="item.src" alt="1" style="margin: auto; width: 500px" />
      <!-- <h3 text="2xl" justify="center">{{ item.id }}</h3> -->
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import img1 from '@/assets/img/1.jpg'
import img2 from '@/assets/img/2.jpg'
import img3 from '@/assets/img/3.jpg'
import img4 from '@/assets/img/4.jpg'
import img5 from '@/assets/img/5.jpg'
import img6 from '@/assets/img/6.jpg'
const img: { src: string; id: number }[] = [
  {
    src: img1,
    id: 1,
  },
  {
    src: img2,
    id: 2,
  },
  {
    src: img3,
    id: 3,
  },
  {
    src: img4,
    id: 4,
  },
  {
    src: img5,
    id: 5,
  },
  {
    src: img6,
    id: 6,
  },
]
</script>
<style scoped>
.el-carousel {
  width: 1200px;
  margin: 20px;
}
.el-carousel__item {
  line-height: 500px;
  margin: 10px auto;
  text-align: center;
}
</style>
